// 提取prod和dev公共的配置文件
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: {
    // vendor一般用来提取公共代码，保证不会每次打包去下载重复的代码
    vendor: [
      'react', 'react-router-dom', 'redux', 'react-dom', 'react-redux'
    ],
  },
  output: {
    path: path.join(__dirname, './dist'),
    filename: '[name].[hash].js',
    // 异步加载的模块是要以文件形式加载，生成的文件名是以chunkname配置的
    chunkFilename: '[name].chunk.[chunkhash].js',
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@': path.join(__dirname, 'src'),
    },
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: ['babel-loader'],
    }, {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      exclude: [path.resolve('src/iconsvg')],
      options: {
        limit: 10000,
        name: path.posix.join('static', 'img/[name].[hash:7].[ext]')
      }
    },]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(__dirname, 'public/index.html'),
    }),
    // 该插件会根据模块的相对路径生成一个四位数的hash作为模块id, 建议用于生产环境。可以解决vendor改变的问题
    new webpack.HashedModuleIdsPlugin(),
    // 配合vendor提取公共代码
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    }),
    // webpack的runtime和manifest，管理所有模块的交互
    // runtime: 在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑
    new webpack.optimize.CommonsChunkPlugin({
      name: 'runtime'
    }),
    // mainfest: 当编译器(compiler)开始执行、解析和映射应用程序时，它将所有模块的详细要点成为mainfest。当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块
    new webpack.optimize.CommonsChunkPlugin({
      name: 'mainfest'
    }),
    // copy custom static assets
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, 'assets'),
      to: path.resolve(__dirname, 'dist')
    }])
  ]
}
